@import './common';

.time-box{
	box-sizing:border-box;
	padding:setSize(20) setSize(24); 
	border-bottom:setSize(1) solid $thirdBgWin;
	font-size: setSize(26);
	font-weight: 400;

	.time{
		color: $mainColor;
	}

	.img-box{

		.img{
			display: block;
			width: setSize(44);
			height: setSize(44);
			margin-right: setSize(4);
		}
	}
}

.list-box{
	position: relative;
	box-sizing:border-box;
	padding: setSize(32) setSize(24);
	border-bottom:setSize(14) solid $thirdBgWin;
	background-color:$bgWin;

	.box-label-icon{
		position:absolute;
		top: 0;
		right: 0;
		display: block;
		width: setSize(58);
		height: setSize(58);
	}

	.list{

		.img-box{
			position:relative;
			width: setSize(160);
			height: setSize(160);

			.text{
				position:absolute;
				top: 0;
				left: 0;
				box-sizing:border-box;
				padding:setSize(0) setSize(6);
				border-top-left-radius:setSize(6);
				font-size:setSize(22);
				font-weight:400;
				color:#332F36;
				background-color:$mainColor;
			}

			.img{
				display: block;
				width: 100%;
				height: 100%;
				border-radius:setSize(6);
			}
		}

		.content-box{
			margin-left:setSize(20);
			@include ellipsis;

			.title-box{
				@include ellipsis;

				.title{
					height: setSize(30);
					line-height:setSize(30);
					font-size:setSize(30);
					font-weight:400;
					color:$textColor;
					@include ellipsis;
				}

				.price{
					height:setSize(30);
					font-size:setSize(30);
					font-weight:500;
					color:$mainColor;
					line-height:setSize(30);
					text-align: right;
					@include ellipsis;
				}
			}

			.label-box{
				margin: setSize(18) 0;
				@include ellipsis;

				.tag{
					height:setSize(42);
					line-height: setSize(42);
					font-size: setSize(26);
					font-weight: 400;
					color:#999;
					@include ellipsis;
				}
			}

			.subscribe-box{

				.icon-wrap{
					position:relative;
					height: setSize(46);
					margin-right: setSize(10);

					.icon-box{
						position:absolute;
						top: 0;
						box-sizing:border-box;
						padding:0;
						width: setSize(46);
						height: setSize(46);

						.icon{
							display: block;
							width: 100%;
							height: 100%;
							border-radius:50%;
						}
					}
				}

				.num-box{
					color:#999;
					@include ellipsis;

					.num{
						font-size:setSize(22);
						font-weight:500;
					}

					.text{
						font-size: setSize(20);
					}
				}

				.btn-box{
					@include ellipsis;

					.btn{
						width:setSize(117);
						height:setSize(42);
						line-height: setSize(42);
						border-radius:setSize(21);
						font-size:setSize(22);
						font-weight:400;
						color: #999999;
						border:setSize(1) solid #999999;
						text-align: center;
						@include ellipsis;
					}

					.btn-active{
						border:setSize(1) solid $mainColor;
						background:$mainColor;
						color:$bgWin;
					}
				}
			}
		}
	}
}